<template>
  <!-- 付款 -->
  <el-dialog
    v-model="dialogVisible"
    title="付款"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      label-position="right"
      v-loading="loading"
    >
      <el-form-item label="付汇银行：" prop="paymentBankId">
        <el-select
          size="large"
          v-model="ruleForm.paymentBankId"
          placeholder="请选择付汇银行"
          class="wh"
        >
          <el-option
            v-for="(item, index) in banks"
            :key="index"
            :label="item.bankName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="上传付汇凭证：" prop="payProofUrl">
        <c-file-upload type="String" v-model="ruleForm.payProofUrl" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button :loading="buttonLoading" size="large" @click="handleClose">取消</el-button>
      <el-button :loading="buttonLoading" size="large" type="primary" @click="handleSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import cFileUpload from "@/components/Upload/FileUpload.vue";
import { deepClone } from "@/utils/index.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const ruleFormRef = ref();
const loading = ref(false);
const buttonLoading = ref(false);
const ruleForm = ref({});
const rules = ref({
  paymentBankId: [
    {
      required: true,
      message: "请选择付汇银行",
      trigger: "change"
    }
  ],
  payProofUrl: [
    {
      required: true,
      message: "请选择支付凭证",
      trigger: "change"
    },
  ],
});
const banks = ref([]);
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const url = "/buyerOrderList/buyerPayment";
      const data = deepClone(ruleForm.value);
      buttonLoading.value = true;
      try {
        await proxy.$post({ url, data });
        ElMessage.success("操作成功");
        emits("change");
        handleClose();
        buttonLoading.value = false;
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};
const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    const url = "/buyerBankList/list";
    const res = await proxy.$get({ url });
    ruleForm.value = {
      id: item.id,
    };
    banks.value = res;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  ruleForm.value = {};
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
.goods-tabs {
  border-bottom: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  min-height: 50px;
}
:deep(.img-size) {
  width: 90px;
  height: 90px;
}
:deep(.el-tabs__header) {
  margin: 0 !important;
}
</style>
